<template>
  <div>
    <el-form
      class="revise-item"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="标题">
        <el-input
          v-model="queryParams.titile"
          placeholder="请输入标题"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发布人">
        <el-input
          v-model="queryParams.sender"
          placeholder="请输入发布人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          plain
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" plain
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="el-row">
      <el-col :span="1.5">
        <el-button
          @click="markRead"
          type="primary"
          size="mini"
          plain
          icon="el-icon-refresh"
        >
          全部标注为已读
        </el-button>
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="open" width="500px" center>
      <div>是否全部标注为已读</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel"> 取 消 </el-button>
        <el-button type="primary" @click="submitForm"> 确 定 </el-button>
      </span>
    </el-dialog>

    <div class="table">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        align="center"
        style="width: 100%"
        ref="mulipleTable"
      >
        <el-table-column prop="titile" label="标题"> </el-table-column>
        <el-table-column prop="msgCategory" :formatter="categoryFormat" label="消息类型" > </el-table-column>
        <el-table-column prop="sender" label="发布人" > </el-table-column>
        <el-table-column prop="sendTime" label="发布时间"> </el-table-column>
        <el-table-column prop="priority" :formatter="priorityFormat" label="优先级"> </el-table-column>
        <el-table-column prop="readFlag" :formatter="readFlagFormat" label="阅读状态"> </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button @click="check(scope.row)" size="mini" type="text" icon="el-icon-edit"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      
      <el-dialog :title="title" :visible.sync="checkOpen" width="40%">
        <el-divider></el-divider>
        <div><div class="titileBox">{{ titile }}</div></div>
        <el-divider></el-divider>
        <div>{{ "发布人：" + sender + "  " + "发布时间：" + sendTime }}</div>
        <el-divider></el-divider>
        <div v-html="msgContent">{{ msgContent }}</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="seeClick"> 确 定 </el-button>
        </span>
      </el-dialog>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getNews"
      />
    </div>
  </div>
</template>

<script>
import {
  getPublishAnnouncement,
  renewReadStatus
} from "@/views/message/js/announcement.js";
import {readAll,readStatus} from '@/views/message/js/send.js'
import store from '@/store/'

export default {
  name: "Information",
  created() {
    this.getNews()
     this.getDicts("msg_category").then(response => {
      this.msgCategoryOptions = response.data;
    });
    this.getDicts("read_flag").then(response => {
      this.readFlagTypeOptions = response.data;
    });
     this.getDicts("sys_priority").then(response => {
      this.priorityOptions = response.data;
    });
  },
  mounted(){
    // 接收事件总线
    this.$EventBus.$on("notifyClick",(res)=>{
      this.getNews()
    })
  },
  activated(){
      this.getNews()
  },
  destroyed(){
    // 页面销毁时移除事件总线
    if (this.EventBus) {
      this.$EventBus.$off("informationClick")
    }
  },
  data() {
    return {
	    loading:true,
      total:0,
      EventBus:false,
      checkOpen:false,
      readFlagTypeOptions: [],
      msgCategoryOptions: [],
      priorityOptions:[],
      open: false,
      title: "",
      tableData: [],
      sender:"",
      sendTime:"",
      msgContent:"",
      titile:"",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        titile: null,
        msgContent: null,
        startTime: null,
        endTime: null,
        sender: null,
        priority: null,
        msgCategory: null,
        msgType: null,
        sendStatus: null,
        sendTime: null,
        cancelTime: null,
        busType: null,
        busId: null,
        openType: null,
        openPage: null,
        userIds: null,
        msgAbstract: null,
        readFlag: null,
      },
    };
  },
  methods: {
    // 消息类型字典翻译
    categoryFormat(row, column) {
      return this.selectDictLabel(this.msgCategoryOptions, row.msgCategory);
    },
     // 优先级字典翻译
    priorityFormat(row, column) {
      return this.selectDictLabel(this.priorityOptions, row.priority);
    },
     // 阅读状态字典翻译
    readFlagFormat(row, column) {
      return this.selectDictLabel(this.readFlagTypeOptions, row.readFlag);
    },
    /** 查询按钮操作 */
    handleQuery() {},
    // 表单重置
    reset() {
      this.addForm = {};
    },
    // 重置按钮
    resetQuery() {},
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 一键已读确定按钮
    submitForm() {
      readAll().then((res) =>{
        if (res.code ==200) {
          this.EventBus = true
          this.$EventBus.$emit("informationClick")
          this.getNews();
        }
      })
      this.open = false;
    },
    // 标记已读按钮
    markRead() {
      this.open = true;
      this.title = "确认操作";
    },
    // 查看
    check(row){
      this.checkOpen = true;
      if (row.msgCategory == 1) {
        this.title = "通知消息";
      }else if (row.msgCategory == 2) {
        this.title = "系统信息";
      }
      this.titile = row.titile;
      this.sender = row.sender;
      this.sendTime = row.sendTime;
      this.msgContent = row.msgContent
      console.log(row);
      let anntId = row.anntId;
      // let userId = store.getters.userInfo.userId
      if (row.readFlag == 0) {
        readStatus(anntId).then((res)=>{
          if (res.code == 200) {
            this.EventBus = true
            this.$EventBus.$emit("informationClick")
            this.getNews();
          }
        })
      }
    },
    seeClick(){
      this.checkOpen = false
    },
    getNews() {
      this.loading = true;
	    this.queryParams.userId=store.getters.userInfo.userId
      getPublishAnnouncement(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.total = res.data.length
          let data = []
          for (let i = 0; i < res.data.length; i++) {
            data.push(res.data[i]);
          }
          this.tableData = data
        }
      });
    },
  },
};
</script>

<style scoped>
.revise-item {
  margin-top: 10px;
  padding: 0px 5px;
}
.revise-item el-input {
  width: 70px;
}
.table {
  margin: 5px 25px 0px;
}
.el-row {
  margin-top: 20px;
  padding: 5px 25px;
}
.titileBox{
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
}
</style>